<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    
        *{padding: 0;margin: 0;}
        .container{
            width: 1226px;
            margin: 50px auto;
            display: flex;
            background-color: grey;

            /* 嵌套的语法默认会被解析为 包含选择器 : .container .magnifier-wrap */
            .magnifier-wrap{
                width: 400px;
                min-height: 500px;
                /* background-color: powderblue; */
            }

            .info-wrap{
                flex: 1;
                min-height: 500px;
                /* background-color: beige; */
            }

            /* 此处会被解析为包含选择器  .container :hover   => container中的子(代)元素滑过时的样式*/
            /* :hover{
                background-color: red;
            } */

            /* 
            & 父选择器修饰符  => 此处css在被解析式不会被解析为包含选择器, 而是把 & 替换为父选择器
            &:hover =>  .containser:hover */
            &:hover{
                background-color: red;
            }
            


            
        }

        /* .container .magnifier-wrap{
            width: 400px;
            min-height: 500px;
            background-color: powderblue;
        } */

     
        
    </style>
</head>
<body>
    <!-- .container>(.magnifier-wrap>.magnifier-preview+.magnifier-list+.magnifier-scale)+.info-wrap -->
    <div class="container">
        <div class="magnifier-wrap">
            <div class="magnifier-preview"></div>
            <div class="magnifier-list"></div>
            <div class="magnifier-scale"></div>
        </div>
        <div class="info-wrap"></div>
    </div>
</body>
</html>